<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"></html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电影上传</title>
    <link rel="stylesheet" href="/webjars/layui/src/css/layui.css">
    <!--<link rel="stylesheet" href="/webjars/layui/src/css/layui.css">-->
    <!--<link rel="stylesheet" href="/static/layui/css/layui.css">-->
    <!--<link rel="stylesheet" href="/webjars/bootstrap/4.4.1-1/css/bootstrap.min.css" />-->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend style="margin: 0 auto">上传电影</legend>
</fieldset>

<!--<label class="layui-form-label">邮箱</label>-->
<!--<div class="layui-input-block">-->
    <input type="text" name="title"  style="width: 600px;margin: 0 auto" id="mail" autocomplete="off" placeholder="请输入你的邮箱以便后台处理完成后通知你" class="layui-input">
<!--</div>-->

<div class="layui-upload" style="margin: 0 auto;width: 600px;" >
    <button type="button" class="layui-btn layui-btn-normal" id="upload">选择文件</button>
    <button type="button" class="layui-btn" id="start">开始上传</button>
    <!--<input></input>-->
    <!--<button type="button" class="layui-btn" id="test">test</button>-->
    <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true">
        <div class="layui-progress-bar" lay-percent="0%"></div>
    </div>
</div>
    <script src="webjars/layui/src/layui.js"></script>
    <!--<script src="/webjars/layui/src/layui.js"></script>-->
    <!--<script src="/static/layui/layui.all.js"></script>-->
    <script>
        layui.use(['upload','element','layer'], function(){
            var layer = layui.layer;
            var upload = layui.upload;
            var element = layui.element;
            var $ = layui.$;
            $("#test").click(function () {
                // alert("ss")
                // layer.alert($("#mail").val());
                var mail = $("#mail").val();
                var pattern = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/
                var match = pattern.exec(mail)
                if(match)
                    return false;
            });
            upload.render({
                elem: '#upload'
                ,drag:true
                ,url: '/uploadFile' //改成您自己的上传接口
                ,auto: false
                ,accept: 'video' //允许上传的文件类型
                ,size: 1024*1024*5 //最大允许上传的文件大小
                //,multiple: true
                ,bindAction: '#start'
                ,progress: function(n, elem){
                    // console.log("hello world");
                    var percent = n + '%'; //获取进度百分比
                    element.progress('demo', percent); //可配合 layui 进度条元素使用
                    // 以下系 layui 2.5.6 新增
                    // console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
                }
                ,before: function(obj){
                    // layer.load(); //上传loading
                    //返回的参数item，即为当前的input DOM对象
                    // var mail = $("#mail").val();
                    var mail = $("#mail").val();
                    var pattern = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/
                    var match = pattern.exec(mail)
                    console.log(match)
                    // if(match){
                    //     layer.alert("你输入的邮箱有误，请重新输入再提交");
                    //     return false;
                    // }else {
                        this.data = {
                            "mail":mail
                        };

                        layer.msg("电影正在上传,后台处理完成后会以邮件的形式通知你");
                        console.log('文件上传中');
                    // }


                }
                ,done: function(res){

                    console.log(res.message);
                    if(res.code === 1) {
                        layer.msg(res.message);
                        console.log("success");
                    }
                    else{
                        layer.msg(res.message);
                        console.log("fail");
                    }



                }
            });
            //执行实例
            //创建监听函数
            var xhrOnProgress=function(fun) {
                xhrOnProgress.onprogress = fun; //绑定监听
                //使用闭包实现监听绑
                return function() {
                    //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                    var xhr = $.ajaxSettings.xhr();
                    //判断监听函数是否为函数
                    if (typeof xhrOnProgress.onprogress !== 'function')
                        return xhr;
                    //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                    if (xhrOnProgress.onprogress && xhr.upload) {
                        xhr.upload.onprogress = xhrOnProgress.onprogress;
                    }
                    return xhr;
                }
            }
        });
    </script>
</body>
</html>